﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/start/jquery-ui-1.8.20.custom.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.custom.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/EditorHookup.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/selectBox.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/jquery.metro.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/jquery.metro.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Menu.css")" rel="stylesheet" type="text/css" />
    @RenderSection("CustomHeader")
    <!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
    <script type="text/javascript">
        $(function () {
            /* Loading Animations */
            $('header').animate({ 'top': 0 }, 500, function () {
                $('nav li').each(function (index) {
                    $(this).slideDown(300 * (index + 1));
                });

                $('section, footer').fadeIn(750).removeClass('hidden');
                //ApplyAnimation();
            });


        });
    </script>
    <script type="text/javascript">

        $(document).ready(function () {
            var height = $(document).height();
        });

        $(function () {

            $("div.metro-pivot").metroPivot();

            $("span.theme-box").click(theme_Changed);

            $("span.accent-box").click(accent_Changed);

            $("#body").attr("accent", 'blue');
            $("#body").attr("theme", 'dark');
            $("#body").attr("accent-bg", 'blue');
        });



        function accent_Changed() {

            var accent = $(this).attr("accent");

            $(document.body).attr("accent", accent);
            $.cookie("jquery.metro.accent", accent);


        }

        function theme_Changed() {

            var theme = $(this).attr("theme");

            $(document.body).attr("theme", theme);

            $.cookie("jquery.metro.theme", theme);
        }

    

    </script>
    <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#switcher').themeswitcher();
        });
    </script>
    <script>
        $(function () {

            $("#settings").show("slow");
            $("aside").hide("slow");
            $("#settings").click(function (e) {
                $("aside").toggle("slow");
            });
            
            $("#themesAndSetting").click(function (e) {
                $("#topdtl").toggle("slow");
            });
            $("#Closethem").click(function (e) {
                $("#topdtl").toggle("slow");
            });
            $("#Close").click(function (e) {
                $("aside").toggle("slow");
            });
        });
    </script>
    <style type="text/css">
        #settings
        {
            padding:5px;
            width: 50px;
            background-color: #000;
            color: #fff;
            top:0px;
            position:fixed;
        }
        #themesAndSetting
        {
            padding:5px;
            width: 50px;
            background-color: #000;
            color: #fff;
            
            left:95%;
            position:fixed;
            top:0px;
        }
    </style>
</head>
<body accent='orange' id="body" theme='light'>
@Html.Partial("_topDetails")
    <aside id="right" class="accent-bg" style="position: fixed; height: 100%;
        z-index: 1000; overflow: auto;width:30%;border:1px solid #000;">
        <a href="#" id="Close" style="position:relative;float:right;color:#fff;margin:3px;">X</a>
      @Html.Partial("_rightSide");
</ul>
</aside>
    <header >
    <hgroup style="margin-top:20px;" >
               <img src="@Url.Content("~/images/logo.png")" height="88px" alt="logo" />
               <div style="float:right;margin-top:20px;">
               @Html.Partial("_topMenu")
               </div>
    </hgroup>
    
    
</header>
    <article style="width: auto; position: relative;">
	<div class="list-wrap">
            @RenderBody()
        </div>
</article>
    <div id="settings">
        Settings
    </div>
    <div id="themesAndSetting">
      Themse
    </div>
    <footer>
	<p>2010 Grids are neat | almost <a href="#">valid HTML5</a> and <a href="#">valid <abbr title="Cascading Style Sheet">CSS</abbr>3</a> design by <a href="#" title="web design london">Webdezign</a> and <a href="#">Slides</a></p>
</footer>
</body>
</html>
